<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }

        .box img {
            vertical-align: top;
        }

        #bigBox>img {
            /*是让里面的图片脱标，为的就是让里面的图片进行一个移动*/
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="box" id="box">

        <!-- 小盒子div -->
        <div class="small" id="smallBox">
            <img src="images/001.jpg" width="350" alt="" />
            <!-- 阴影 -->
            <div class="mask" id="mask"></div>
        </div>

        <div class="big" id="bigBox">
            <!-- 大图 -->
            <img id="bigImg" src="images/0001.jpg" width="800" alt="" />
        </div>

    </div>
    <script>
        let smallBox = document.querySelector('#smallBox');
        let mask = document.querySelector('#mask');
        let bigBox = document.querySelector('#bigBox');
        let bigImg = document.querySelector('#bigImg');
        //鼠标移入事件----阴影和放大图显示
        smallBox.onmouseenter = function () {
            mask.style.display = 'block';
            bigBox.style.display = 'block';
        }
        //鼠标移出事假----阴影和放大图隐藏
        smallBox.onmouseleave = function () {
            mask.style.display = 'none';
            bigBox.style.display = 'none';
        }
        //找到图片相对于可视页面的横向距离和纵向距离,如果小盒子是动态的的话,此赋值就可以放入事件里面
        let tamp = smallBox.getBoundingClientRect();
        //鼠标移动事件----需要使阴影随鼠标一起移动
        smallBox.onmousemove = function (e) {
            //此x,y为阴阳部分左上角的方位,但是需求是让鼠标在阴影的中心位置
            let x = e.clientX - tamp.left;
            let y = e.clientY - tamp.top;
            //只需要上一步的距离减掉阴影部分宽高的1/2即可
            x -= (mask.offsetWidth / 2);
            y -= (mask.offsetHeight / 2);
            //很明显,阴影部分不能超出小盒子范围,所以要对其最小距离和最大距离进行判断
            x = x < 0 ? 0 : x;
            //最大距离为小盒子宽度-阴影粉粉宽度
            maxX = smallBox.offsetWidth - mask.offsetWidth;
            x = x > maxX ? maxX : x;
            y = y < 0 ? 0 : y;
            maxY = smallBox.offsetHeight - mask.offsetHeight;
            y = y > maxY ? maxY : y;
            //最终得到阴影部分和鼠标关系
            mask.style.left = x + 'px';
            mask.style.top = y + 'px';
            //大图对于小图来说是一个放大的图,所以找到大图和小图的比例,即可得到等比例移动效果
            let impX = bigImg.offsetWidth / smallBox.offsetWidth;
            let impY = bigImg.offsetHeight / smallBox.offsetHeight;
            //看到需求,发现小图从右往左,大图就会从右往左,但实际上鼠标移动方向时从左往右的,方向相反,所以只要取负值即可得到大图效果
            bigImg.style.left = -impX * x + 'px';
            bigImg.style.top = -impY * y + 'px';
        }
    </script>
</body>

</html>